<template>
  <div>
    <el-row>
      <el-col :span="8" :offset="8">
        <el-container>
          <div class="login-panel">
            <div class="login-panel-box login-back"></div>
            <div class="login-panel-box login-main">
              <div class="login-to login-to-home" title="返回主页">
                <span class="iconfont icon-fanhui" @click="goto('/','Index')"></span>
              </div>
              <div class="login-to login-to-register" title="注册">
                <span class="iconfont icon-zhuce" @click="goto('/register','Register')"></span>
              </div>
              <div class="logo" @click="goto('/','Index')">
                <span class="logo-s">S</span>
                <span class="logo-j">J</span>
              </div>
              <el-form label-position="right" :rules="rules" ref="loginForm" :model="loginForm">
                <el-form-item prop="username">
                  <el-input placeholder="用户名..." prefix-icon="iconfont icon-username"
                            v-model="loginForm.username"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input placeholder="密码..." prefix-icon="iconfont icon-mima2" type="password" show-password
                            v-model="loginForm.password"></el-input>
                </el-form-item>
                <el-form-item prop="code">
                  <el-row :gutter="20">
                    <el-col :span="16">
                      <el-input placeholder="验证码..." prefix-icon="iconfont icon-yanzhengma1"
                                v-model="loginForm.code"></el-input>
                    </el-col>
                    <el-col :span="8">
                      <el-image :src="src" class="code-box" @click="getCaptcha">
                        <div slot="placeholder" class="image-slot">
                          加载中<span class="dot">...</span>
                        </div>
                        <div slot="error" class="image-slot">
                          <i class="el-icon-picture-outline"></i>
                        </div>
                      </el-image>
                    </el-col>
                  </el-row>
                </el-form-item>
              </el-form>
              <el-button type="success" style="width: 100%" round plain @click="login('loginForm')">登录</el-button>
              <div class="third">
                <span class="iconfont icon-qq" title="qq登录"></span>
              </div>
            </div>
          </div>
        </el-container>
      </el-col>
    </el-row>
  </div>
</template>

<script>

export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        username: 'sunjun',
        password: 'sunjun1222..',
        key: '',
        code: ''
      },
      src: "",
      rules: {
        username: [
          {required: true, message: "请输入用户名", trigger: 'blur'},
          {pattern: /^([a-zA-Z\d]){2,10}$/, message: "长度为2到10个字符(不能含有中文字符)", trigger: 'blur'}
        ],
        password: [
          {required: true, message: "请输入密码", trigger: 'blur'},
          {
            pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z\\W\.]{6,18}$/,
            message: "密码必须包含数字和字母，可以有特殊字符长度为6-18个字符",
            trigger: 'blur'
          }
        ],
        code: [
          {required: true, message: "请输入验证码", trigger: 'blur'}
        ]
      }
    }
  },
  created() {
    this.getCaptcha();
  },
  methods: {
    login(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)',
            customClass: 'loading-text',
            target: document.querySelector(".auth-panel")
          });
          this.$axios({
            method: "POST",
            url: this.$api.LOGIN_URL,
            params: this.loginForm,
            headers: {
              'content-type': 'application/x-www-form-urlencoded'
            }
          }).then(res => {
            if (res.data.code == 200) {
              this.$router.push({
                path: '/',
                name: 'Index'
              });
              this.$message.success(res.data.message);
              this.$store.commit('setToken', res.data.data.token);
              this.$store.commit("setUserInfo", res.data.data.userInfo);
            }
            this.getCaptcha();
            loading.close();
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    getCaptcha() {
      this.$get(this.$api.CAPTCHA_URL, null).then(res => {
        this.loginForm.key = res.data.data.key;
        this.src = res.data.data.base64Image;
      })
    },
    goto(path, name) {
      this.$router.push({
        path, name
      })
    }
  }
}
</script>

<style scoped>
.login-panel {
  width: 100%;
  height: 90vh;
  box-sizing: border-box;
  color: white;
  position: relative;
}

.login-panel-box {
  box-sizing: border-box;
  position: absolute;
  width: 100%;

}

.login-to {
  position: absolute;
  cursor: pointer;
}

.login-to:hover {
  color: #098d25;
  transition: color .3s;
}

.login-to-home {
  top: 10px;
  left: 20px;
}

.login-to-register {
  top: 10px;
  right: 20px;
}

.login-back {
  margin-top: 20vh;
  background: #7fbf90;
  opacity: .3;
}

.login-main {
  overflow: hidden;
  transform: translateY(25%);
  padding: 50px 100px;
  border-radius: 15px;
  box-shadow: 0 0 10px 3px #d3f3c7;
}

.logo {
  display: flex;
  box-sizing: border-box;
  cursor: pointer;
  margin-bottom: 20px;
  justify-content: center;
}

.logo-s {
  display: block;
  font-size: 2em;
  font-weight: bolder;
  color: #459151;
  font-family: 'Georgia';
  font-style: oblique;
}

.logo-j {
  display: block;
  font-size: 1.8em;
  font-weight: bolder;
  color: #40c4be;
  font-family: 'Lucida Handwriting';
  font-style: oblique;
  padding-top: 5px;
}

.code-box {
  text-align: center;
  height: 38px;
  border-radius: 5px;
}

.third {
  margin-top: 10px;
  text-align: center;
}

.third > span {
  font-size: 28px !important;
  cursor: pointer;
}

.third > span:hover {
  color: #7fc3ef;
}

.loading-text {
  color: #00BB33;
}

.image-slot{
  text-align: center;
}
</style>
